<template>
  <div class="file-input" @click="() => handleClick()">
    <slot></slot>
    <!-- type='file' 让用户选择文件的控件。使用 accept 属性规定控件能选择的文件类型。 -->
    <input type="file" class="input" name="upload" ref="inputRef" :accept="accept"
      @change="$event => handleChange($event)">
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits, ref } from 'vue'

defineProps({
  accept: {
    type: String,
    default: 'image/*'
  }
})

const emit = defineEmits<{
  (event: 'change', payload: FileList): void
}>()

const inputRef = ref<HTMLInputElement>()

const handleClick = () => {
  if (!inputRef.value) return
  inputRef.value.value = ''
  // 由于隐藏了input控件，所以需要获取打上了ref的input元素并进行点击
  inputRef.value.click()
}
const handleChange = (e: Event) => {
  // HTMLInputElement.files：返回/接受FileList对象，该对象包含表示所选上载文件的文件对象列表。
  const files = (e.target as HTMLInputElement).files
  if (files) emit('change', files)
}
</script>

<style lang="scss" scoped>
.input {
  display: none;
}
</style>